<!-- fileName: PlayListContent -->
<template>
  <div>
    <div v-if="isEvery">
      <div style="padding-left: 30px; padding-right: 30px; padding-top: 30px;">
        <div style="display: flex; position: relative; align-items: center">
          <div class="dateBg">
            <el-image :src="dateSrc" class="date"/>
            <span class="dateSpan">11</span>
          </div>
          <div style="margin-left: 20px;display: flex; flex-direction: column">
            <div style="font-size: 25px; font-weight: bold">每日歌曲推荐</div>
            <div style="opacity: .8; font-size: 13px; margin-top: 10px;">根据你的音乐口味生成, 每天6:00更新</div>
          </div>
        </div>
        <div style="display: flex; margin-top: 10px; margin-left: 10px;">
          <div class="playBox">
            <div @mouseout="playButtonOut" @mouseover="playButtonOver" class="play-button"
                 ref="play-button">
              <el-image :src="playIconSrc"
                        style="width: 20px; height: 20px"/>
              <span style="font-size: 15px; color: #fff">
              播放全部
            </span>
            </div>
            <div @mouseout="playAddButtonOut" @mouseover="playAddButtonOver" class="play-add-button"
                 ref="play-add-button">
              <i class="el-icon-plus" style="color: #fff"></i>
            </div>
          </div>
          <div class="folder-button">
            <el-image :src="folderAddSrc" class="folder"></el-image>
            <span style="font-size: 14px; color: rgba(0, 0, 0, .7)">收藏全部</span>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px; background-color: rgba(0, 0, 0, .1); height: 1px; border: none"/>
    </div>
    <div v-else>
      <div style="display: flex;">
        <el-skeleton :loading="loading" :throttle="300" animated>
          <template #template>
            <div style="display: flex">
              <el-skeleton-item style="width: 185px; height: 185px; border-radius: 5px;" variant="image"/>
              <div style="flex: 1;display: flex; flex-direction: column; margin-left: 15px;">
                <div style="display: flex; align-items: center">
                  <div>
                    <el-skeleton-item style="display: inline-block;
                  width: 25px; height: 15px;
                   line-height: 12px; border-radius: 2px; margin-left: 3px;" variant="rect"/>
                  </div>
                  <div style="margin-left: 15px;">
                    <span style="font-size: 22px; font-weight: bold">
                      <el-skeleton-item style="display: inline-block; width: 250px;" variant="h2"></el-skeleton-item>
                    </span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin: 5px 0;">
                  <div>
                    <el-skeleton-item style="width: 25px; height: 25px;"
                                      variant="circle"></el-skeleton-item>
                  </div>
                  <div style="margin-left: 10px;">
                    <el-skeleton-item style="width: 35px; height: 15px"
                                      variant="text"></el-skeleton-item>
                  </div>
                  <div style="margin-left: 10px;">
                    <el-skeleton-item style="width: 85px; height: 15px"
                                      variant="text"></el-skeleton-item>
                  </div>
                </div>
                <div style="display: flex">
                  <div>
                    <el-skeleton-item style="width: 100px; height: 30px"
                                      variant="button"></el-skeleton-item>
                  </div>
                  <div style="margin-left: 5px;">
                    <el-skeleton-item style="width: 100px; height: 30px"
                                      variant="button"></el-skeleton-item>
                  </div>
                  <div style="margin-left: 5px;">
                    <el-skeleton-item style="width: 100px; height: 30px"
                                      variant="button"></el-skeleton-item>
                  </div>
                  <div style="margin-left: 5px;">
                    <el-skeleton-item style="width: 100px; height: 30px"
                                      variant="button"></el-skeleton-item>
                  </div>
                </div>
                <div>
                  <el-skeleton-item style="width: 100%; height: 15px"
                                    variant="text"></el-skeleton-item>
                  <el-skeleton-item style="width: 100%; height: 15px"
                                    variant="text"></el-skeleton-item>
                  <el-skeleton-item style="width: 100%; height: 15px"
                                    variant="text"></el-skeleton-item>

                </div>
              </div>

            </div>
          </template>
          <template #default>
            <div style="display: flex; margin: 35px" v-show="!loading">
              <el-image :src="playInfo.coverImgUrl"
                        style="flex-shrink: 0; width: 185px; height: 185px; border-radius: 5px;"
                        v-if="playInfo && playInfo.coverImgUrl">
              </el-image>
              <div style="display: flex; flex-direction: column; margin-left: 15px;">
                <div style="display: flex; align-items: center">
                  <div>
                    <div style="display: inline-block;
             border: 1px solid #ec4141;
              width: auto; height: auto;
              padding: 3px;
               line-height: 12px; border-radius: 2px; margin-left: 3px;">
              <span style="
              text-align: center;
               color: #ec4141;
               margin-left: 2px;
               font-size: 14px; letter-spacing: 2px">
                歌单
              </span>
                    </div>
                  </div>
                  <div style="margin-left: 15px;"><span
                    style="font-size: 22px; font-weight: bold">{{playInfo.name}}</span>
                  </div>
                </div>
                <div style="display: flex; align-items: center; margin: 5px 0;">
                  <div>
                    <el-image :src="creator.avatarUrl"
                              style="width: 25px; height: 25px; border-radius: 50px;">
                      <div slot="error">
                      </div>
                    </el-image>
                  </div>
                  <div style="margin-left: 10px;">
                    <span style="font-size: 13px; color: #0B58B0">{{creator.nickname}}</span>
                  </div>
                  <div style="margin-left: 10px;">
                    <span
                      style="font-size: 13px; color: rgba(0, 0, 0, .6)">{{toDate_yyyy_mm_dd(playInfo.createTime)}}创建</span>
                  </div>
                </div>
                <div style="display: flex">
                  <div>
                    <div class="playBox">
                      <div @mouseout="playButtonOut" @mouseover="playButtonOver"
                           class="play-button" ref="play-button">
                        <el-image :src="playIconSrc"
                                  style="width: 20px; height: 20px"/>
                        <span style="font-size: 15px; color: #fff">
          播放全部
        </span>
                      </div>
                      <div @mouseout="playAddButtonOut" @mouseover="playAddButtonOver"
                           class="play-add-button" ref="play-add-button">
                        <i class="el-icon-plus" style="color: #fff"></i>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="subscribed-button">
                      <el-image :src="folderAddSrc" class="folder"></el-image>
                      <span style="padding-left: 5px;font-size: 14px; color: rgba(0, 0, 0, .7)">收藏({{playInfo.subscribedCount | unitToThousand}})</span>
                    </div>
                  </div>
                  <div>
                    <div class="share-button">
                      <el-image :src="shareSrc" class="folder"></el-image>
                      <span style="padding-left: 5px;font-size: 14px; color: rgba(0, 0, 0, .7)">分享({{playInfo.shareCount | unitToThousand}})</span>
                    </div>
                  </div>
                  <div>
                    <div class="download-button">
                      <el-image :src="downloadSrc" class="download"></el-image>
                      <span style="padding-left: 5px;font-size: 14px; color: rgba(0, 0, 0, .7)">下载全部</span>
                    </div>
                  </div>
                </div>
                <div style="font-size: 14px; margin: 5px 0;"
                     v-if="playInfo.tags && playInfo.tags.length > 0">标签: <span :key="index"
                                                                                style="color: #0B58B0"
                                                                                v-for="(tag, index) in playInfo.tags">{{tag}}</span>
                </div>
                <div style="font-size: 14px; margin: 5px 0;">歌曲: <span style="color: rgba(0, 0, 0, .6)">{{playInfo.trackCount}}</span>
                  播放: <span
                    style="color: rgba(0, 0, 0, .6)">{{ playInfo.playCount | unitToThousand }}</span>
                </div>
                <div style="font-size: 14px; margin: 5px 0;" v-if="playInfo.description">简介: <span
                  style="color: rgba(0, 0, 0, .6)">{{playInfo.description}}</span></div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
    <MusicList v-show="!loading" :data="playList"
               :fields="tableFields" />
  </div>
</template>

<script lang="ts">
  import { RECOMMEND_MUSIC_LIST } from '@/utils/constant'
  import { discoverApi } from '@/api/discover'
  import MusicList from '@/components/musicList/MusicList.vue'
  import { createNamespacedHelpers } from 'vuex'
  import dateSrc from '@/assets/img/discover/date_red.png'
  import playIconSrc from '@/assets/img/discover/play-icon.png'
  import folderAddSrc from '@/assets/img/discover/folder_add.png'
  import shareSrc from '@/assets/img/share.png'
  import downloadSrc from '@/assets/img/download.png'

  const { mapActions } = createNamespacedHelpers('layout')


  export default {
    components: { MusicList },
    data() {
      return {
        dateSrc,
        playIconSrc,
        folderAddSrc,
        shareSrc,
        downloadSrc,
        playList: [],
        tableFields: RECOMMEND_MUSIC_LIST,
        recommendReasons: [],
        isEvery: true,
        playInfo: {},
        creator: {},
        coverImg: null,
        loading: true
      }
    },
    created() {
      this.isEvery = this.$route.params.type === 'every'
      if (!this.isEvery) {
        this.getPlayListById(this.$route.params.type)
        return
      }
      this.getEveryDayRecommendSongList()
    },
    methods: {
      ...mapActions(['mainRouterChange']),
      unitToThousand(unit) {
        let thousand = unit / 10000
        if (thousand >= 1) {
          thousand = parseInt(thousand)
          thousand = thousand + '万'
        } else {
          thousand = unit
        }
        return thousand
      },
      getEveryDayRecommendSongList() {
        discoverApi().getEveryDayRecommendSongList().then(res => {
          this.playList = res.dailySongs
          this.recommendReasons = res.data.recommendReasons
        })
      },
      playButtonOver(target) {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#DC443E'
        playAddButton.style.backgroundColor = '#E84842'
      },
      playButtonOut(target) {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#FD544E'
        playAddButton.style.backgroundColor = '#FD544E'
      },
      playAddButtonOver() {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playAddButton.style.backgroundColor = '#DC443E'
        playButton.style.backgroundColor = '#E84842'
      },
      playAddButtonOut() {
        const playButton = this.$refs['play-button']
        const playAddButton = this.$refs['play-add-button']
        playButton.style.backgroundColor = '#FD544E'
        playAddButton.style.backgroundColor = '#FD544E'
      },
      getPlayListById(id) {
        this.loading = true
        discoverApi().getPlayListById({
          id
        }).then(res => {
          const playListRes = res
          const trackIds = playListRes.playlist.trackIds
          this.playInfo = playListRes.playlist
          this.creator = this.playInfo.creator
          let ids = ''
          for (let i = 0; i < trackIds.length; i++) {
            if (i + 1 === trackIds.length) ids += trackIds[i].id
            else ids += trackIds[i].id + ','
          }
          discoverApi().getSongDetailById({
            ids
          }).then(async subRes => {
            this.playList = subRes.songs
            for (let i = 0; i < this.playList.length; i++) {
              this.playList[i].index = i + 1
            }
            // await this.sleep(5000)
            console.log(this.playList)
            console.log(this.playInfo.coverImgUrl)
            this.loading = false
          })
        })
      }
    },
    watch: {
      '$route'(to, from) {
        console.log('main')
        this.$emit('mainRouterChange')
      }
    }
  }
</script>

<style lang="less" scoped>
  .dateBg {
    width: 100px;
    height: 100px;
    position: relative;
  }

  .date {
    width: 100px;
    height: 100px;
    position: absolute;
  }

  .dateSpan {
    color: #fd544e;
    font-size: 35px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -30%);
  }

  .folder {
    width: 20px;
    height: 20px;
  }

  .download {
    width: 18px;
    height: 15px;
  }

  :deep(.current-row td, .el-table__body tr.current-row>td) {
    background-color: rgba(66, 66, 66, .1) !important;
  }

  .play-button {
    background-color: #FD544E;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 35px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    outline: none;
    border: none;
  }

  .play-add-button {
    background-color: #fd544e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .2);
    height: 35px;
    padding-right: 8px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px
  }

  .folder-button {
    display: flex;
    width: 100px;
    margin-left: 10px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
  }

  .folder-button:hover {
    background-color: #F2F2F2;
  }

  .subscribed-button {
    display: flex;
    width: 130px;
    margin-left: 10px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
  }

  .subscribed-button:hover {
    background-color: #F2F2F2;
  }

  .share-button {
    display: flex;
    width: 120px;
    margin-left: 10px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
  }

  .share-button:hover {
    background-color: #F2F2F2;
  }

  .download-button {
    display: flex;
    width: 100px;
    margin-left: 10px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50px;
    align-items: center;
    justify-content: center;
  }

  .download-button:hover {
    background-color: #F2F2F2;
  }

  .playBox {
    display: flex;
  }
</style>
